import React from "react";
import {px} from "../utils/ScreenUtil";
import Svg, {
  Circle,
  Ellipse,
  G,
  Text,
  TSpan,
  TextPath,
  Path,
  Polygon,
  Polyline,
  Line,
  Rect,
  Use,
  Image,
  Symbol,
  Defs,
  LinearGradient,
  RadialGradient,
  Stop,
  ClipPath,
  Pattern,
  Mask,
} from 'react-native-svg';
import {Animated} from "react-native";
import {AnimatedText} from "./AnimatedText";



class Energy extends React.Component {

  state = {
    opacity: 0.8,
    swing: new Animated.Value(0),//文字向上移动
  }
  r = px(50);//约定整个圆的半径
  sw = px(8);//圆的描边线的半径
  rr = this.r - this.sw;//真实半径

  _onPress = () => {

    Animated.timing(this.state.swing, {
      toValue: px(70),
      duration: 500,
    }).start(() => {
      this.setState({
        opacity: 0
      })
    })
  }

  render() {
    const {point, swing, index} = this.props;
    const realSwing = index % 2 !== 0 ? point.y + swing : point.y - swing;
    if(this.state.opacity===0){
      return null;
    }else {
      return (
        <G
          opacity={this.state.opacity}
          onPress={() => this._onPress()}>
          <Circle
            cx={point.x}
            cy={realSwing}
            r={this.rr}
            fill="#a6ffa6"
            strokeWidth={this.sw}
            stroke="#53ff53"/>
          <Text
            x={point.x}
            y={realSwing}
            textAnchor="middle"
            fontWeight="bold"
            fontSize="10"
            fill="red"
          >00:02</Text>
          <Text
            x={point.x}
            y={realSwing + px(80)}
            textAnchor="middle"
            fontSize="10"
            fill="#53ff53"
          >地铁出行</Text>
          {
            this.state.swing._value!==0?<AnimatedText
              x={point.x}
              y={realSwing}
              swing={this.state.swing}
            />:null
          }

        </G>
      )
    }
  }
}

export const AnimatedEnergy = Animated.createAnimatedComponent(Energy);
